<template>
	<div>
		<breadcrumb></breadcrumb>
		<div class="header">
			<div class="inputItem">
				<div class="title">标题</div>
				<div class="inputBox">
					<el-input v-model="keyWord" @keyup.enter.native="cread1()">
					</el-input>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">创建人</div>
				<div class="inputBox">
					<el-input v-model="createBy" @keyup.enter.native="cread1()">
					</el-input>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">创建时间</div>
				<el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<!-- 查询 -->
			<div class="Btn_grounp">
				<el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
					@click="cread1()">搜索</el-button>
				<el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
					@click="clenUp">清空</el-button>
			</div>
			<button class="addBtn" @click="showBasicDialog()">
				<i class="el-icon-plus iconBtn"></i>
				<span>添加</span>
			</button>
		</div>
		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" header-align="center" ref="table"
					:row-style="{ color: '#595959', fontSize: '12px' }">
					<el-table-column align="center" type="selection" width="50"></el-table-column>
					<el-table-column align="center" prop="SerialNumber" width="80" label="序号">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="title" label="标题">
					</el-table-column>
					<el-table-column align="center" prop="reply" label="回复关键字">
					</el-table-column>
					<el-table-column align="center" prop="createBy" label="创建人">
					</el-table-column>
					<el-table-column align="center" prop="createTime" label="创建时间">
					</el-table-column>

					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" @click="Editing(scope.row)">编辑</el-button>
								<el-button type="text" size="small" @click="Delete(scope.row)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="paginationBox">
				<el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
					<template slot>
						<span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total || '0' }}条,每页{{ data.size || '0' }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>



		<el-dialog class="dialog" :title="title" :visible.sync="visibleBasicBox" width="1000px">
			<el-form ref="BasicForm" :model="BasicForm" label-width="110px">
				<el-row>
					<div>

						<el-col :span="8">
							<el-form-item label="标题">
								<el-input placeholder="请输入标题" v-model="formdata.title">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="关键字">
								<el-input placeholder="请输入关键字" v-model="formdata.reply">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="内容">
								<el-table class="placeTableStyle" :data="formdata.list"
									:header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
									<el-table-column prop="serialNumber" label="序号" width="50">
										<template slot-scope="scope">
											<div>
												{{ scope.$index + 1 }}
											</div>
										</template>
									</el-table-column>
									<el-table-column label="标题">
										<template slot-scope="scope">
											<el-input placeholder="请输入" v-model="scope.row.title"></el-input>
										</template>
									</el-table-column>
									<el-table-column label="内容">
										<template slot-scope="scope">
											<el-input placeholder="内容" v-model="scope.row.content"></el-input>
										</template>
									</el-table-column>
									<el-table-column align="center" label="操作" width="60">
										<template slot-scope="scope">
											<i class="iconfontcolor icon-a- commonStyle" @click="addTable"
												v-show="scope.$index == 0"></i>
											<i class="iconfontcolor icon-a-- commonStyle" @click="delit(scope.$index)"
												v-show="scope.$index > 0"></i>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
						</el-col>
					</div>
					<el-col :span="24" style="display: flex;justify-content: flex-end;">
						<el-button class="cancelBtn" @click="visibleBasicBox = false">取 消</el-button>
						<el-button class="submitBtn" type="primary" @click="BasicSubmit()">确 定</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import newCity from '@/common/newCity';
import basic from '@/http/apis/basicSetting'
import breadcrumb from '@/components/breadcrumb.vue'
export default {

	data() {
		return {
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			records: [],
			// 添加对话框的表单
			visibleBasicBox: false,

			BasicForm: {},
			formdata: {
				title: "",
				reply: "",
				list: [{
					title: "",
					content: ""
				}
				]
			},
			editing: '1',//是否编辑
			permissions: {},
			pageIndex: 1,
			pageSize: 10,
			keyWord: '',//标题
			createTime: "",//创建时间
			createBy: "",//创建人
			data: {
				total: 1,
				size: 10
			},
			title: '添加'
		}
	},
	created() {
		this.cread()
	},
	methods: {
		clenUp() {
			this.keyWord = ''
			this.createBy = ''
			this.createTime = []

			this.cread1()
		},
		changePages(e) {
			this.pageIndex = e
			this.cread()
		},
		cread1(){
			this.pageIndex=1;
			this.cread();
		},
		async cread() {
			let params = {
				keyWord: this.keyWord,
				current: this.pageIndex,
				size: this.pageSize,
				createBy: this.createBy,
				startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
				endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
			}
			let res = await basic.queryCustomerService(params)
			this.records = res.data.data.records
			this.data = res.data.data

			console.log(this.records)

		},
		async Editing(e) {
			let res = await basic.echoCustomerService({ cid: e.cid })
			let data = res.data.data
			for (let k in this.formdata) {
				this.formdata[k] = data[k]
			}
			this.formdata.cid = data.cid
			this.title = '修改'
			this.visibleBasicBox = true
		},
		Delete(e) {
			this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http.basicSettingApi.removeCustomerService({ cid: e.cid }).then((res) => {
					if (res.data.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.cread()
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		showBasicDialog() {
			this.title = '添加'
			this.formdata = {
				title: "",
				reply: "",
				list: [{
					title: "",
					content: ""
				}
				]
			}
			this.visibleBasicBox = true

		},
		addTable() {
			this.formdata.list.push({ title: '', content: '' })
		},
		delit(e) {
			this.formdata.list.forEach((item, i) => {
				if (i == e) {
					this.formdata.list.splice(i, 1)
				}
			})
		},

		//添加对话框的3种确定 事件
		async BasicSubmit() {
			if (this.title == '添加') {
				basic.addCustomerService(this.formdata).then((res) => {
					if (res.data.code == 200) {
						this.$message.success('添加成功')
					}
				})
			} else {
				basic.modifyCustomerService(this.formdata).then((res) => {
					if (res.data.code == 200) {
						this.$message.success('修改成功')
						this.cread()
					}
				})
			}
			this.visibleBasicBox = false
		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
		},
	},
	components: {
		breadcrumb
	},
	mounted() {

	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},


}
</script>

<style lang="scss" scoped>
.header {
	height: 75px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 30px;


	.Btn_grounp {
		display: flex;


		.searchBtn {
			width: 80px;
			height: 32px;
			color: #fff;
			font-size: 12px;
		}

		.clearBtn {
			width: 80px;
			height: 32px;
			color: #262626;
			font-size: 12px;
			transition: 0.2s;
			background-color: #fff;

			&:hover {
				color: #1890FF;
				background-color: #ecf5ff;
			}
		}
	}

	.addBtn {
		background-color: #1890ff;
		border-radius: 4px;
		height: 32px;
		color: #ffffff;
		font-size: 12px;
		padding: 8px 17px 9px 17px;
		transition: 0.2s;
		cursor: pointer;
		margin-right: 10px;
		margin-left: auto;

		.iconBtn {
			margin-right: 7px;
			font-size: 15px;
		}

		&:hover {
			opacity: 0.8;
		}
	}

	.inputItem {
		display: flex;
		align-items: center;
		margin-right: 23px;

		>.title {
			color: #262626;
			font-size: 12px;
			margin-right: 7px;
		}

		>.inputBox {
			width: 160px;

			.select {
				::v-deep .el-input__icon {
					line-height: 0;
				}
			}

			::v-deep .el-input__inner {
				height: 32px;
				font-size: 12px;
			}

			::v-deep .el-input__inner::placeholder {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}
}



.main {
	width: 100%;
	height: calc(100vh - 202px);
	// background-color: #fff;
	padding: 0 30px;
	background-color: #fff;

	.list {
		width: 100%;
		height: calc(100% - 48px);

		::v-deep .el-table__body-wrapper {
			height: calc(100vh - 299px);
			overflow-y: scroll;
		}

		// 表头样式

		::v-deep .el-table__header th {
			background-color: #f0f6fd;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			height: 48px;
			padding: 0;

		}

		.stateBtns {
			height: 30px;

			::v-deep .el-button {
				font-size: 12px;
				border: none;
				width: 76px;
				height: 30px;
				margin: 0 auto;
				box-sizing: border-box;
			}

			.icon-dian {
				font-size: 12px;
			}
		}
	}

	.paginationBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;

		.pagination {
			display: flex;
			align-items: center;
			height: 48px;
			margin-left: auto;

		}
	}
}
</style>